<template>
  <div class="list">
    <PageHeader title="商品添加" hidden-breadcrumb>
      <template #action>
        <Button type="primary" @click="$router.go(-1)">返回</Button>
      </template>
    </PageHeader>
    <!-- 将内容拆分出来三个组件 -->
    <Tabs value="rich" class="con">
      <TabPane label="商品信息" name="info"
        ><Base @value="getBaseValue"
      /></TabPane>
      <TabPane label="商品属性" name="attr">标签二的内容</TabPane>
      <TabPane label="商品详情" name="rich"
        ><Rich @value="getRichValue"
      /></TabPane>
    </Tabs>
    <!-- 1. 简单信息填写 -->
    <!-- 2. 商品属性填写 -->
    <!-- 3. 商品富文本 -->
    <!-- 727132985@qq.com -->
    <div>
      <Button type="primary" @click="addData">保存</Button>
    </div>
  </div>
</template>
<script>
import Rich from "./components/Rich";
import Base from "./components/Base";
import { add } from "@/api/goods";
export default {
  name: "GoodsAdd",
  components: {
    Rich,
    Base,
  },
  data() {
    return {
      FormData: null,
    };
  },
  methods: {
    getBaseValue(v) {
      this.FormData = v;
      // console.log(this.FormData);
    },
    getRichValue(v) {
      // console.log(v);
      this.FormData.detail = v;
    },
    addData() {
      add(this.FormData).then((res) => {
        if (res.data.errCode == 0) {
          this.$Notice.suceess({
            title: "添加成功",
            onClose: () => {
              this.$router.push("/admin-index/goods");
            },
          });
        } else {
          this.$Notice.error({
            title: "添加失败",
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.list {
  width: 100%;
  margin: 0 10px;
  padding: 10px;
  margin-top: 50px;
}
.con {
  margin-top: 20px;
  background-color: aliceblue;
}
</style>